<template>
  <view class="waterfall">
    <uv-waterfall
      ref="waterfall"
      v-model="list"
      :add-time="10"
      :left-gap="leftGap"
      :right-gap="rightGap"
      :column-gap="columnGap"
      @changeList="changeList"
    >
      <!-- 第一列数据 -->
      <template #list1>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @click.native="onViewDetail(item)">
            <view class="waterfall-item__image" :style="[imageStyle(item)]">
              <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}" />
            </view>
            <view class="waterfall-item__ft">
              <view class="waterfall-item__ft__title">
                <text class="value">{{ item.name }}</text>
              </view>
              <!-- 		<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.desc}}</text>
							</view> -->
              <view class="info">
                <view class="user">
                  <!-- <view class="icon">
                    <u-icon name="account" color="rgba(0, 0, 0, 0.5)" size="10" />
                  </view> -->
                  <u-avatar :src="item.avatar" size="30" />
                  <view class="nickname">{{ item.customer_name || '' }}</view>
                </view>
                <view class="star">
                  <u-icon name="thumb-up" color="rgba(0, 0, 0, 0.5)" size="20" />{{ item.like_num }}
                </view>
              </view>
              <view class="tag">{{ item.subject_name }}</view>
            </view>

            <!-- 审核中及删除功能蒙层 -->
            <view v-if="needDelete" class="del-mask">
              <view v-if="item.status === 0" class="status">审核中</view>
              <view class="remove-btn" @click.stop="onRemove(item)">
                <u-icon name="trash-fill" color="#F00" size="22" />
              </view>
            </view>
          </view>
        </view>
      </template>
      <!-- 第二列数据 -->
      <template #list2>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @click.native="onViewDetail(item)">
            <view class="waterfall-item__image" :style="[imageStyle(item)]">
              <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}" />
            </view>
            <view class="waterfall-item__ft">
              <view class="waterfall-item__ft__title">
                <text class="value">{{ item.name }}</text>
              </view>
              <!-- 		<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.desc}}</text>
							</view> -->
              <view class="info">
                <view class="user">
                  <!-- <view class="icon">
                    <u-icon name="account" color="rgba(0, 0, 0, 0.5)" size="10" />
                  </view> -->
                  <u-avatar :src="item.avatar" size="30" />
                  <view class="nickname">{{ item.customer_name || '' }}</view>
                </view>
                <view class="star">
                  <u-icon name="thumb-up" color="rgba(0, 0, 0, 0.5)" size="20" />{{ item.like_num }}
                </view>
              </view>
              <view class="tag">{{ item.subject_name }}</view>
            </view>

            <!-- 审核中及删除功能蒙层 -->
            <view v-if="needDelete" class="del-mask">
              <view v-if="item.status === 0" class="status">审核中</view>
              <view class="remove-btn" @click.stop="onRemove(item)">
                <u-icon name="trash-fill" color="#F00" size="22" />
              </view>
            </view>
          </view>
        </view>
      </template>
    </uv-waterfall>
  </view>
</template>

<script>
export default {
  props: {
    outsideList: {
      type: Array,
      default: () => []
    },
    needDelete: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [], // 瀑布流全部数据
      list1: [], // 瀑布流第一列数据
      list2: [], // 瀑布流第二列数据
      leftGap: 10,
      rightGap: 10,
      columnGap: 10
    }
  },
  computed: {
    imageStyle(item) {
      return item => {
        const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap
        const w = v / 2
        const rate = w / item.w
        const h = rate * item.h
        return {
          width: w + 'px',
          height: h + 'px'
        }
      }
    }
  },
  watch: {
    outsideList: {
      handler(v) {
        console.log('接收到的列表参数')
        console.log(v)
        this.list = []
        this.list1 = []
        this.list2 = []
        this.$nextTick(() => {
          this.list = v
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    changeList(e) {
      console.log(e)
      this[e.name].push(e.value)
    },
    onViewDetail(data) {
      this.$utils.navigateToPage('/pagesArticle/detail', `id=${data.id}`)
    },
    onRemove(data) {
      this.$emit('delete', data)
    }
  }
}
</script>

<style lang="scss" scoped>
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
		position: relative;

		.del-mask {
			z-index: 9;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;

			.status {
				width: 200rpx;
				height: 200rpx;
				margin-top: 20rpx;
				color: #FFF;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.5);
				@include flex-center;
				position: absolute;
				left: 50%;
				top: 30rpx;
				transform: translateX(-50%);
			}

			.remove-btn {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}
		}
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;

			.value {
				font-size: 28rpx;
				color: #000;
				@include text-ellipsis(2);
			}
		}

		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}

		&__btn {
			padding: 10px 0;
		}
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.icon {
		width: 36rpx;
		height: 36rpx;
		background: #D8D8D8;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.star {
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.5);
		line-height: 28rpx;
		text-align: right;
		font-style: normal;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tag {
		font-weight: 400;
		font-size: 20rpx;
		color: #000000;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		background: #D8D8D8;
		padding: 4rpx 8rpx;
		display: inline-block;
		border-radius: 20rpx;
		margin-top: 16rpx;
	}

	.user {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.9);
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		margin-top: 14rpx;
	}

	.nickname {
		margin-left: 8rpx;
    font-size: 20rpx;
	}
</style>
